<template >
  <div v-loading="loading">
    <el-form :model="data" :rules="dataYZ" ref="data" class="mar_top" label-width="120px">
      <el-form-item label="发放红包" prop="cdn_pid">
        <el-col :span="12">
          <div>
            <el-input size="medium" :disabled="true" clearable v-model="packetTitle"></el-input>
          </div>
        </el-col>
        <el-col :span="5" :offset="1">
          <el-button
            :loading="$store.state.isLoading"
            size="medium"
            type="primary"
            @click="xzshop('xzShop')"
          >选择红包</el-button>
        </el-col>
      </el-form-item>
      <el-form-item label="用户类型" prop="cdn_pid">
        <el-col :span="12">
          <el-radio v-model="data.types" label="1">单个会员</el-radio>
          <el-radio v-model="data.types" label="2">某个等级</el-radio>
        </el-col>
      </el-form-item>
      
      <el-form-item label="发放类型" prop="cdn_pid">
        <el-col :span="20">
          <el-radio v-model="data.grant_type" label="0">直接使用</el-radio>
          <el-radio v-model="data.grant_type" label="1">需手动领取</el-radio>
        </el-col>
      </el-form-item>

      <el-form-item label="发放用户" v-if="data.types=='1'">
        <el-col :span="12">
          <div>
            <el-input size="medium" :disabled="true" clearable v-model="packetNickname"></el-input>
          </div>
        </el-col>
        <el-col :span="5" :offset="1">
          <el-button
            :loading="$store.state.isLoading"
            size="medium"
            type="primary"
            @click="xzshop('xzusershop')"
          >选择用户</el-button>
        </el-col>
      </el-form-item>

      <el-form-item label="发放等级" v-if="data.types=='2'">
        <el-col :span="12">
          <el-select v-model="data.rating" placeholder="请选择" >
            <el-option
              v-for="item in ratting"
              :key="item.value"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button
          :loading="$store.state.isLoading"
          size="medium"
          type="primary"
          @click.prevent="subForm"
        >确定</el-button>
      </el-form-item>

      <div class="mar_bottom_15">
        <span class="sizeColor size_13 sp_style"></span>
        
      </div>
    </el-form>
    <keep-alive>
      <component
        :is="current"
        :show="shows"
        :isAll="true"
        showType="list"
        @sendShop="getSend"
        @isshow="getShow"
      ></component>
    </keep-alive>
  </div>
</template>


<style lang="less" scoped></style>

<script>
import xzShop from "@/components/currency/xz_packet.vue";
import xzusershop from "@/components/currency/xz_user.vue";
import { mapState } from "vuex";
export default {
  data() {
    return {
      options: [
        {
          value: "",
          label: ""
        }
      ],
      mytitle: "",
      fileList2: [],
      updateUrl: "",
      showImg: true,
      value: "",
      data: {
        types: "1",
        uid: "",
        pid: "",
        rating:"",
        grant_type:"0"
      },
      packetTitle: "",
      packetNickname: "",
      loading: false,
      shows: true,
      shopImg: "",
      shopobj: {},
      current: "",
      dataYZ: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }]
      },
      visible: this.show
    };
  },
  computed: {
    ...mapState({
      ratting: state => state.ratting
    })
  },
  components: {
    xzShop,
    xzusershop
  },
  props: {
    show: Boolean,
    editId: String,
    clickNum: Number
  },
  methods: {
    xzshop(str) {
      if (str == "xzShop") {
        if (
          this.$store.state.shopSlist == "" ||
          this.$store.state.shopSlist.page != 1
        ) {
          this.$store.dispatch("getShopsAll", { page: 1, page_size: 10 });
        }
      }
      this.current = str;
      this.shows = true;
    },
    getShow(val) {
      this.shows = val;
    },
    getSend(row) {
      console.log(row);
      if (this.current == "xzShop") {
        this.data.pid = row.id;
        this.packetTitle = row.title;
      } else {
        if (row.id == "0") {
          this.packetNickname = "所有用户";
        } else {
          this.packetNickname =
            (row.nickname ? row.nickname : "xxx") + "(" + row.username + ")";
        }
        this.data.uid = row.id;
      }

      // this.$emit("sendRow",row)
    },
    subForm() {
      if (this.data.pid == "") {
        this.$message.error("请选择发放的红包");
      } else if (this.data.uid == "" && this.data.types=='1') {
        this.$message.error("请选择发放的用户");
      } else if (this.data.rating == "" && this.data.types=='2') {
        this.$message.error("请选择发放的等级");
      } else {
        this.$api.getNews.packetAdd(this.data).then(res => {
          if (res.data.code == 200) {
            this.$fnc.alertSuccess(res.data.result);
            this.$emit("sendSunc");
          } else {
            this.$fnc.alertError(res.data.result);
          }
        });
      }
    }
  },
  watch: {},
  mounted() {},
  created() {},
  updated() {}
};
</script>
